<template>
  <div v-loading="loading">
    <BasicTable @register="registerTable" >
      <template #tableTitle v-if="!isDetail">
        <a-button type="primary" @click="handleAdd()" :disabled="isDisabledAuth(Auth.saveEvbTopic)" >
          <Icon icon="i-ant-design:plus-outlined" /> {{ t('添加') }}
        </a-button>
      </template>
    </BasicTable>
    <InputForm @register="registerInputForm" @success="handleSuccess" />
    <FieldLibList @register="registerFieldLib" @success="handleSuccess" />
  </div>
</template>
<script lang="ts" name="EvbMsgField" setup>
import { ref, watch } from 'vue';
import { Auth } from '/@/enums/authEnum'
import { BasicTable, BasicColumn, useTable } from '/@/components/Table';
import { useDrawer } from '/@/components/Drawer';
import { useI18n } from '/@/hooks/web/useI18n';
import { usePermission } from '/@/hooks/web/usePermission';
import { useGlobSetting } from '/@/hooks/setting';
import { useModal } from "/@/components/Modal"
import { msgFieldColumns } from '../data';
import * as evbApi from '/@/api/infra/eventBus';
import { useMessage } from '/@/hooks/web/useMessage';
import InputForm from './MsgFieldForm.vue';
import FieldLibList from './FieldLibList.vue';
import { useRouter } from "vue-router"
import { Icon } from '/@/components/Icon';

const { t } = useI18n('');
const { createMessage } = useMessage();
const glob = useGlobSetting();
const { isDisabledAuth } = usePermission()
const [registerInputForm, { openDrawer: openInputForm }] = useDrawer();
const [registerFieldLib, { openModal: openFieldLib }] = useModal();
const loading = ref(false)
const props = defineProps({
  record: { type: Object },
  isDetail: { type: Boolean, default: false },
})
const isInit = ref(false)

const actionColumn: BasicColumn = {
  width: 130,
  title: '操作',
  dataIndex: 'action',
  fixed: 'right',
  slot: 'tableActions',
  actions:  (record: Recordable) => [
    {
      label: '删除',
      color: 'error',
      ifShow:  !props.isDetail,
      disabled: record.fieldName == 'ITEMS',
      popConfirm: {
        title: '是否确认删除',
        confirm: handleDelete.bind(null, record),
      },
    },
    {
      label: '编辑',
      disabled: props.isDetail,
      onClick: handleForm.bind(null, record),
    }
  ],
  dropDownActions: (record: Recordable) => [
    
  ]
}

const [registerTable, { reload, expandAll }] = useTable({
  api: evbApi.listSubscribeField,
  columns: msgFieldColumns,
  alwaysShowTitle: true,
  bordered: false,
  beforeFetch: (params) => {
    params.topicCode = props.record?.topicCode;
    params.subscribeId = props.record?.id;
    return params;
  },
  showIndexColumn: false,
  immediate: false,
  showTableSetting: false,
  useSearchForm: false,
  defaultExpandAllRows: true,
  isTreeTable: true,
  pagination: false,
  canResize: false,
  rowKey: 'id',
  actionColumn: actionColumn,
})

// onMounted(() => {
//   if (!isInit.value && props.record) {
//     reload()
//     isInit.value = true;
//   }
// })

watch(
  () => props.record,
  async (val: any) => {
    if (!isInit.value && val) { 
      await reload()
      expandAll()
      isInit.value = true;
    }
  }
)

const handleForm = (record) => openInputForm(true, { record });
const handleAdd = () => openFieldLib(true, { record: props.record });
const handleDelete = async (record) => await evbApi.deleteSubscribeField({ id: record.id }, reload)
const handleSuccess = async (ids) => {
  loading.value = true
  try {
    await evbApi.addSubscribeField({ topicCode: props.record?.topicCode, fieldIds: ids, subscribeId: props.record?.id })
    await reload()
  } finally {
    loading.value = false
  }
}

</script>
